import React from 'react';
import { Form, Input, Typography, Button, message, Select, Space, Row, Col, Tooltip } from 'antd';
import { connect } from 'umi';
import IconFont from '@/components/Iconfont';

const { Text } = Typography;
class AlipayOption extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            record: {},
        }
    }
    formRef: any = React.createRef();
    componentDidMount() {
        this.getData(this.props.record.appID, this.props.record.payChanelIndex);
    }
    onFinish = (values: any) => {
        this.setState({ loading: true });
        var datas = this.props.record;
        datas.ParamSetting = JSON.stringify(values.model);
        this.props.dispatch({
            type: "Abp/update",
            payload: datas,
            control: 'UserPayChanel',
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('更新成功！');
                this.setState({ loading: false });
            }
            else {
                message.error('保存错误，请联系管理员');
            }
        });
    }
    onClose = () => {
        this.props.closeDraw();
    };
    getData = (appId: string, optType: string) => {
        const { dispatch } = this.props;
        if (appId && optType) {
            dispatch({
                type: 'Abp/getOptsAsync',
                payload: { appId, optType },
                control: 'UserPayChanel',
            }).then(() => {
                var result = this.props.response.result?.params;
                //var record = JSON.parse(result);
                this.setState({ record: result });
                this.formRef.current.setFieldsValue({ model: result });
            });
        }
    }
    render() {
        return (
            <Form
                layout='vertical'
                ref={this.formRef} onFinish={this.onFinish}
            >
                <Row gutter={[16, 16]}>
                    <Col span={12}>
                        <Form.Item
                            label={<span>商户号(AppId) <Tooltip title="为支付宝开放平台-APPID"><IconFont type="icon-wenhao" /></Tooltip></span>}
                            name={['model', 'appId']}
                            rules={[{ required: true, message: "商户号必填" }]}>
                            <Input placeholder="商户号" />
                        </Form.Item>
                        <Form.Item label="RSA 支付宝公钥(AlipayPublicKey)" name={['model', 'alipayPublicKey']}>
                            <Input.Password placeholder="RSA 支付宝公钥 加签方式为公钥证书时，留空。" />
                        </Form.Item>
                        <Form.Item
                            label={<span>RSA 应用私钥(AppPrivateKey) <Tooltip title="RSA 应用私钥 加签方式为公钥证书时，为证书对应的私钥。"><IconFont type="icon-wenhao" /></Tooltip></span>}
                            name={['model', 'appPrivateKey']}>
                            <Input.Password />
                        </Form.Item>
                        <Form.Item label="服务地址(ServerUrl)" name={['model', 'serverUrl']}>
                            <Input placeholder="服务地址" />
                        </Form.Item>
                        <Form.Item label="签约版本(Version)" name={['model', 'version']}>
                            <Select>
                                <Select.Option value="1.0">1.0</Select.Option>
                                <Select.Option value="1.2">1.2</Select.Option>
                                <Select.Option value="2.1.5">2.1.5</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="签名类型(SignType)" name={['model', 'signType']}>
                            <Select placeholder="支持：RSA2(SHA256WithRSA)、RSA1(SHA1WithRSA)，默认为RSA2">
                                <Select.Option value="RSA1">RSA1</Select.Option>
                                <Select.Option value="RSA2">RSA2</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="加密秘钥(EncyptKey)" name={['model', 'encyptKey']}>
                            <Input.Password placeholder="加密秘钥" />
                        </Form.Item>
                        <Form.Item label="商户证书(AppCert)" name={['model', 'appCert']}>
                            <Input placeholder="商户证书" />
                        </Form.Item>
                        <Form.Item label="支付宝公钥证书(AlipayPublicCert)" name={['model', 'alipayPublicCert']}>
                            <Input placeholder="支付宝公钥证书" />
                        </Form.Item>
                        <Form.Item label="根证书(RootCert)" name={['model', 'rootCert']}>
                            <Input placeholder="根证书" />
                        </Form.Item>
                    </Col>
                </Row>
                <Form.Item>
                    <Space>
                        <Button type="primary" htmlType="submit" loading={this.state.loading}>保存</Button>
                        <Button onClick={this.onClose}>取消</Button>
                    </Space>
                </Form.Item>
            </Form>
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
}))(AlipayOption);